<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>不想起名|更新文章</title>
    <%
        String context = request.getContextPath();
    %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="../img/favicon.ico"/>
    <%--    <link rel="stylesheet" href="../css/manage.css"/>--%>
    <%--    <link rel="stylesheet" href="../css/bootstrap.min.css">--%>
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/editormd.min.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <%--    <script src="../js/jquery.min.js"></script>--%>
    <script src="../js/blog.js"></script>
    <%--    <script src="../js/bootstrap.min.js"></script>--%>
    <script src="../js/editormd.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                dataType: "json",    //数据类型为json格式
                type: "GET",
                url: "<%=context %>/servlet/CategoryServlet?action=ajaxmain",
                success: function (data) {
                    let main_id = $("#main_id");
                    main_id.empty();
                    main_id.append('<option value="0">一级分类</option>');
                    $.each(data, function (key, val) {
                        main_id.append('<option value="' + key + '">' + val + '</option>');
                    })
                },
                error: function () {
                    alert("获取分类失败");
                }
            })
        });

        function getSubCatagory() {
            let main_id = $("#main_id").val();
            $.ajax({
                dataType: "json",    //数据类型为json格式
                type: "GET",
                url: "<%=context %>/servlet/CategoryServlet?action=ajaxsub",
                data: {"main_id": main_id},
                success: function (data) {
                    let sub_id = $("#sub_id");
                    sub_id.empty();
                    sub_id.append('<option value="0">二级分类</option>');
                    $.each(data, function (key, val) {
                        sub_id.append('<option value="' + key + '">' + val + '</option>');
                    })
                },
                error: function () {
                    alert("获取分类失败");
                }
            })
        }

        function beforeSubmit(form) {
            if (form.title.value == '') {
                alert('文章标题不能为空！');
                form.title.focus();
                return false;
            }
            if (form.test - editormd - markdown - doc.value == 0) {
                alert('文章内容不能为空！');
                form.category.focus();
                return false;
            }
            if (form.category.value == 0) {
                alert('文章类别不能为空！');
                form.category.focus();
                return false;
            }
            if (form.subtitle.value == '') {
                alert('文章摘要不能为空！');
                form.subtitle.focus();
                return false;
            }
            if (form.main_id.value == '') {
                alert('文章主分类不能为空！');
                form.subtitle.focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<%--获取session，若是没有登录则跳转到登录界面--%>
<%
    if (session.getAttribute("username") == null) {
%>
<%--调用下面的模态框提示登录--%>
<script>
    $(function () {
        $('#staticBackdrop').modal('show')
    });
</script>
<%
    }
%>
<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">未登录！</h5>
                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>--%>
            </div>
            <div class="modal-body">
                管理员登录之后方可管理界面
            </div>
            <div class="modal-footer">
                <a href="../login.html" type="button" class="btn btn-outline-primary">登录</a>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="">
        <img class="rounded img-fluid" src="../img/avatar.jpg" width="48" height="48" alt="个人头像">
    </a>
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="<%=context %>/servlet/PostlistServlet?role=1"
               class="nav-link">查看文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/admin/addpost.jsp" class="nav-link">写文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/servlet/CategoryServlet?action=getall"
               class="nav-link">文章分类</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/index.html" class="nav-link">返回首页</a>
        </li>
        <li>
            <a href="javascript:scroll(0,0)" class="nav-link">回到顶部</a>
        </li>
    </ul>
</nav>
<div class="container-fluid">
    <c:forEach items="${result.dataList }" var="article">
        <form class="form-group" action="<%=context %>/servlet/PosteditServlet?action=update&id=${article.id }"
              method="post"
              onSubmit="return beforeSubmit(this);">
            <div class="card bg-light text-dark" style="margin: 2%">
                <div class="card-header"><h4>修改文章</h4></div>
                <div class="card-body row">
                    <div id="edit" class="col-9">
                        <input type="text" id="article-title" name="title" class="form-control" placeholder="在此处输入标题"
                               required="" autofocus="" autocomplete="off" style="width:100%;"
                               value="${article.title }">
                        <div class="editormd" id="test-editormd">
                        <textarea class="editormd-markdown-textarea"
                                  name="test-editormd-markdown-doc">${article.md_content }</textarea>
                            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                            <textarea class="editormd-html-textarea" name="text"></textarea>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                editormd("test-editormd", {
                                    width: "100%",
                                    height: 650,
                                    syncScrolling: "single",
                                    //你的lib目录的路径，我这边用JSP做测试的
                                    path: "${context }/admin/lib/",
                                    //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                                    emoji: true,
                                    placeholder: "在这里愉快的进行MarkDown编辑！",
                                    imageUpload: true,//从本地上传图片，用不到
                                    saveHTMLToTextarea: true
                                });
                            });
                        </script>
                    </div>
                    <div id="operate" class="col-3">
                        <div class="publish">
                            <h5><input type="checkbox" class="input-control" name="top" value="${article.top }">&nbsp;将该文章置顶
                            </h5>
                            <h5>发布时间：</h5>
                            <input type="text" name="year" size="4" maxlength="4" style="margin: 5px 0;"
                                   value="${fn:substring(article.createdate,0,4)}">
                            - <input type="text" name="month" size="2" maxlength="2" style="margin: 5px 0;"
                                     value="${fn:substring(article.createdate,5,7)}">
                            - <input type="text" name="day" size="2" maxlength="2" style="margin: 5px 0;"
                                     value="${fn:substring(article.createdate,8,10)}"><br/>
                            @ <input type="text" name="hour" size="2" maxlength="2" autocomplete="off"
                                     value="${fn:substring(article.createdate,11,13)}">
                            : <input type="text" name="minute" size="2" maxlength="2" autocomplete="off"
                                     value="${fn:substring(article.createdate,14,16)}"><br/>
                        </div>
                        <h5>摘要：</h5>
                        <textarea name="subtitle" rows="6" class="form-control">${article.subtitle }</textarea>
                        <h5>分类：</h5>
                        <select class="form-control" id="main_id" name="main_id" style="margin:5px;"
                                onchange="getSubCatagory()">
                            <option value="0">一级分类</option>
                        </select>
                        <select class="form-control" id="sub_id" name="sub_id" style="margin:5px;">
                            <option value="0">二级分类</option>
                        </select>
                        <button type="submit" class="btn btn-outline-primary" style="float: right;margin:5px;">发布更新
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </c:forEach>
</div>
</body>
</html> 
